<template>
  <van-tabbar v-model="active" @change="change(active)" style="position:static">
    <template v-for="route in $router.options.routes[0].children" v-if="!route.hidden">
      <van-tabbar-item :to="route.path">
        <span>{{route.name}}</span>
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? route.icon.active : route.icon.normal" />
        </template>
      </van-tabbar-item>
    </template>
  </van-tabbar>
</template>

<script>
  import { Tabbar, TabbarItem,Icon } from 'vant'
  import { mapGetters, mapActions } from 'vuex'
    export default {
        name: "footLy",
        components:{
          [Tabbar.name]:Tabbar,
          [TabbarItem.name]:TabbarItem,
          [Icon.name]:Icon
        },
        data(){
          return {
            active:0
          }
        },
        // computed:{
        //   active:{
        //     get:function () {
        //       return this.$store.getters.getActive
        //     },
        //     set:function (active) {
        //       return active
        //     }
        //   }
        // },
        updated(){
        let user = sessionStorage.getItem('user')
          if (user === null) {
            this.logined = false;
            this.Username = null;
            this.Useravatar = null;
          } else {
            this.logined = true;
            user = JSON.parse(user);
            this.Username = user.name;
            this.Useravatar = user.avatar;
          }
        },
        mounted(){
          let active = sessionStorage.getItem('tabActive')
          if(!active){
            this.$store.dispatch('tabchange',0)
          }
          // this.active = Number(this.$store.getters.footbar.opened)
          // let user = sessionStorage.getItem('user')
          // if(user !== null){
          //   this.$store.dispatch('login')
          // }
        },
        methods:{
          // ...mapActions({
          //   change:'tabchange'
          // })
          change(active){
            console.log(active)
          }
        }
    }
</script>

<style scoped lang="scss">
  @import 'vant/lib/vant-css/icon-local.css';
  .van-tabbar-item{
    color: #888;
  }
  .van-tabbar-item--active{
    color: #ff1631;
  }
  .van-tabbar--fixed{
    
  }
</style>
